<template>
  <div class="login flexCenter">
    <!-- 左边图片 -->
    <div class="bounce-animation flexCenter">
      <!-- 左边图片 -->
      <div style="box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;">
        <el-image
          style="height: 556px; width: 605px; vertical-align: bottom; border-radius: 6px 0 0 6px"
          :src="util.getAssetsFile('login_back.png')"
          fit="fill"
        ></el-image>
      </div>
      <!-- 右边登录框 -->
      <div class="forgo-form">
        <!-- 重置密码 -->
        <div>
          <el-form ref="forgetPFormRef" :model="regForm" :rules="regRules">
            <h2 class="title">{{ $t('licence.register') }}</h2>
            <div class="title_box"></div>
            <el-form-item prop="email">
              <el-input v-model.trim="regForm.email" type="text" autocomplete="off" :placeholder="$t('licence.for_email')"> </el-input>
            </el-form-item>
            <el-form-item prop="verifyCode">
              <div class="bind_code margin_top">
                <el-input
                  class="bind_code_input code"
                  v-model.trim="regForm.verifyCode"
                  type="text"
                  autocomplete="off"
                  :placeholder="$t('licence.for_code')"
                />
                <el-button @click.prevent="bindforgetSendCode" class="bind_code_gain" :disabled="disabled">{{ btnText }}</el-button>
              </div>
            </el-form-item>

            <el-form-item prop="newpassword">
              <el-input v-model.trim="regForm.newpassword" type="password" autocomplete="off" :placeholder="$t('licence.for_new')"> </el-input>
            </el-form-item>

            <el-form-item style="width: 100%">
              <el-button type="primary" style="height: 50px; width: 100%; border: none" @click.prevent="forgot">
                <span>{{ $t('licence.for_determine') }}</span>
              </el-button>
              <div class="forget" style="text-align: center; color: #305add;width: 100%;">
                <router-link style="text-align: center; color: #305add" :to="'/login'">{{ $t('licence.for_return') }}</router-link>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--  底部  -->
      <!-- <div class="el-login-footer">
        <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import util from '@/utils/util';
import { forget, getidentifyingCode } from '@/api/login';
import { useI18n } from 'vue-i18n'
import { forgetData} from '@/api/types';

const { t } = useI18n()
const router = useRouter();
let btnText = t('licence.for_btnText'); //获取验证码
const lang = ref(0);//切换语言
const disabled = ref(false);// 发送验证码的 文本 以及按钮是否可以按
const regRules: ElFormRules = {
      email: [
      {
        required: true,
        message: t('licence.for_email'),
        trigger: 'blur',
      },
    ],
    verifyCode: [
      {
        required: true,
        message: t('licence.mVerifyCode'),
        trigger: 'blur',
      },
    ],
    newpassword: [
      {
        required: true,
        trigger: 'blur',
        message: t('licence.mNewPass'),
      },
      {
        min: 6,
        max: 20,
        message: t('licence.mNewPassG'),
        trigger: 'blur',
      },
    ],
};
const regForm = ref<forgetData>({
    // 449378993@qq.com
    email: '',
    newpassword: '',
    verifyCode: '',
    uuid: '',
} as forgetData);
const forgetPFormRef = ref<ElFormInstance>();
onMounted(()=>{
  // 获取语言
  if (localStorage.getItem('locale') == 'en_US') {
    lang.value = 1;
  } else {
    lang.value = 0;
  }
});
// 发送验证码
const bindforgetSendCode = ()=> {
  //手机号 为空的话
  forgetPFormRef.value?.validateField('email', (errorMessage) => {
    if (!errorMessage) {
      // 获取验证码
      getidentifyingCode(regForm.value.email as string).then((res) => {
      });
      ElMessage(t('licence.mChaShou'));
      disabled.value = true;
      setTimeout(() => {
        doLoop(60);
      }, 500);
    } else {
      return false;
    }
  });
};

// 手机验证码的倒计时
const doLoop = (seconds: number) => {
  seconds = seconds ? seconds : 60;
  btnText = seconds + t('licence.btnTextS');
  // code = code
  let countdown = setInterval(() => {
    if (seconds > 0) {
      btnText = seconds + t('licence.btnTextS');
      --seconds;
      disabled.value = true;
    } else {
      btnText = t('licence.for_btnText');
      disabled.value = false;
      clearInterval(countdown);
    }
  }, 1000);
};
// 忘记密码
const forgot=()=> {
  let data = {
    email: regForm.value.email,
    identifyingCode: regForm.value.verifyCode,
    newPassword: regForm.value.newpassword,
    lang: lang
  };
  forget(data)
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success(t('licence.success'));
      }
      regForm.value = {
        email: '',
        verifyCode: '',
        newpassword: '',
      };
      setTimeout(() => {
        router.push('/login');
      }, 2000);
    })
    .catch((err) => {});
}
</script>

<style scoped lang="scss">
// rel="stylesheet/scss"
.login {
  height: 100%;
  // background-image: url('../assets/images/login-bg.png');
  background-size: cover;
}

// 标题
.title {
  font-size: 34px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #2b2b2b;
  text-shadow: 0px 4px 16px rgba(0, 19, 54, 0.07);
  margin-top: 10px;
  margin-bottom: 20px;
}
// 标题背景
.title_box {
  position: relative;
  bottom: 30px;
  width: 140px;
  height: 14px;
  background: #305add;
  box-shadow: 0px 4px 16px 0px rgba(0, 19, 54, 0.07);
  border-radius: 2px;
  opacity: 0.16;
}
// 登录框外面盒子
.forgo-form {
  border-radius: 0 6px 6px 0;
  background: #ffffff;
  width: 489px;
  height: 558px;
  padding: 85px 25px 5px 55px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

// input框距离
.el-form-item {
  margin-bottom: 40px;
}
// 验证码样式
.forgo-form .el-input input {
  height: 38px;
}

// .el-input__inner {
//   border: none;
//   height: 40px;
//   background-color: #f6f8fc;
//   border-radius: 4px;
//   outline: none;
//   // padding: 0 100px 0 10px;
// }
::v-deep .el-input--medium .el-input__inner {
  border: none;
  height: 50px !important;
  background-color: #f6f8fc !important;
  border-radius: 4px;
}
.bind_code {
  position: relative;
  ::v-deep .el-input__suffix {
    right: 97px;
  }
  .el-button {
    border: 0;
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .bind_code_gain {
    position: absolute;
    top: calc(50% - 16px);
    right: 10px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #305add;
    line-height: 18px;
    // cursor: pointer;
    padding-left: 10px;
    border-left: 1px solid #d8d8d8;
  }
}
.bounce-animation {
  height: 100%;
  animation: bounce 1s;
  animation-timing-function: ease-in-out;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(-100px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
</style>
